<m-notice [icon]="'flaticon-exclamation m--font-primary'">
	For more info please check the components's official demos & documentation 
	<a class="m-link" href="https://material.angular.io/components/button/overview" target="_blank">demos & documentation</a>
</m-notice>

<div class="row">
	<div class="col-xl-6">
		<m-material-preview [viewItem]="exampleDeterminate">
			<div class="m-section">
				<p class="m-section__sub">
					<code>&lt;mat-progress-bar&gt;</code>is a horizontal progress-bar for indicating progress and activity.
				</p>
				<p class="m-section__sub">
					<b>Determinate:</b> Operations where the percentage of the operation complete is known should use the determinate indicator.
				</p>
				<div class="m-separator m-separator--dashed"></div>
				<div class="example-container">
					<mat-progress-bar mode="determinate" value="40"></mat-progress-bar>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleIndeterminate">
			<div class="m-section">
				<span class="m-section__sub">
					Operations where the user is asked to wait while something finishes and it’s not necessary to indicate how long it will take should use the indeterminate indicator.
				</span>
				<div class="m-separator m-separator--dashed"></div>
				<div class="example-container">
					<mat-progress-bar mode="indeterminate"></mat-progress-bar>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleBuffer">
			<div class="m-section">
				<span class="m-section__sub">
					Operations where the user wants to indicate some activity or loading from the server, use the buffer indicator.
				</span>
				<div class="m-separator m-separator--dashed"></div>
				<div class="example-container">
					<mat-progress-bar mode="buffer"></mat-progress-bar>
				</div>
			</div>
		</m-material-preview>
	</div>
	<div class="col-xl-6">
		<m-material-preview [viewItem]="exmapleQuery">
			<div class="m-section">
				<span class="m-section__sub">
					For situations where the user wants to indicate pre-loading (until the loading can actually be made), use the query indicator.
				</span>
				<div class="m-separator m-separator--dashed"></div>
				<div class="example-container">
					<mat-progress-bar mode="query"></mat-progress-bar>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleConfig">
			<div class="m-section">
				<div class="example-container">
					<mat-card>
						<mat-card-content>
							<h2 class="example-h2">Progress bar configuration</h2>

							<section class="example-section">
								<label class="example-margin">Color:</label>
								<mat-radio-group [(ngModel)]="color">
									<mat-radio-button class="example-margin" value="primary">
										Primary
									</mat-radio-button>
									<mat-radio-button class="example-margin" value="accent">
										Accent
									</mat-radio-button>
									<mat-radio-button class="example-margin" value="warn">
										Warn
									</mat-radio-button>
								</mat-radio-group>
							</section>

							<section class="example-section">
								<label class="example-margin">Mode:</label>
								<mat-radio-group [(ngModel)]="mode">
									<mat-radio-button class="example-margin" value="determinate">
										Determinate
									</mat-radio-button>
									<mat-radio-button class="example-margin" value="indeterminate">
										Indeterminate
									</mat-radio-button>
									<mat-radio-button class="example-margin" value="buffer">
										Buffer
									</mat-radio-button>
									<mat-radio-button class="example-margin" value="query">
										Query
									</mat-radio-button>
								</mat-radio-group>
							</section>

							<section class="example-section" *ngIf="mode == 'determinate' || mode == 'buffer'">
								<label class="example-margin">Progress:</label>
								<mat-slider class="example-margin" [(ngModel)]="value"></mat-slider>
							</section>
							<section class="example-section" *ngIf="mode == 'buffer'">
								<label class="example-margin">Buffer:</label>
								<mat-slider class="example-margin" [(ngModel)]="bufferValue"></mat-slider>
							</section>
						</mat-card-content>
					</mat-card>

					<mat-card>
						<mat-card-content>
							<h2 class="example-h2">Result</h2>

							<section class="example-section">
								<mat-progress-bar class="example-margin" [color]="color" [mode]="mode" [value]="value" [bufferValue]="bufferValue">
								</mat-progress-bar>
							</section>
						</mat-card-content>
					</mat-card>

				</div>
			</div>
		</m-material-preview>
	</div>
</div>